<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>平台管理系统</title>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="webjars/element-ui/index.css"/>
    <link type="text/css" rel="stylesheet" href="/platform/styles/main.css"/>
    <style type="text/css">
        div.el-tabs__nav>div.el-tabs__item:nth-child(1) span{
            display: none !important;
        }
    </style>
</head>
<body>
<div id="mainView" class="wrapper">
    <div>
        <headbar :user-info="userInfo"></headbar>
        <sidebar :menus="menus" @jump-menu="handMenuClick"></sidebar>
    </div>
    <div style="position:absolute;top:70px;left:250px;right:0px;bottom:0;margin:0px;">
        <el-tabs v-model="tabsValue" type="border-card" closable @tab-remove="removeTab">
            <el-tab-pane
                    v-for="(item, index) in tabsArr"
                    :key="item.name"
                    :label="item.title"
                    :name="item.name"
            >
                <div id="context" style="width: 100%;height: 100%; margin-left: 10px;">
                    <iframe :src="item.content" style="width: 100%;height: 100%;border: 0px;"></iframe>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
<!-- 先引入 Vue -->
<script src="webjars/vue/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="webjars/element-ui/index.js"></script>
<script src="webjars/axios/axios.min.js"></script>
<script src="webjars/tool/index.js"></script>
<script src="webjars/components/headbar.js"></script>
<script src="webjars/components/sidebar.js"></script>
<script>
    autodivheight();
    function autodivheight(){
        //获取浏览器窗口高度
        var winHeight=0;
        if (window.innerHeight)
            winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
        //通过深入Document内部对body进行检测，获取浏览器窗口高度
        if (document.documentElement && document.documentElement.clientHeight)
            winHeight = document.documentElement.clientHeight;
        //DIV高度为浏览器窗口的高度
        document.getElementById("context").style.height= (winHeight -125) +"px";

    }
    window.onresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度

    var vue = new Vue({
        el: "#mainView",
        data: {
            userInfo: {
                userName: 'longhairen',
            },
            tabsValue: 'home',
            tabsArr: [{
                title: '首页',
                name: 'home',
                content: 'home.html'
            }],
            tabsName: ['home'],
            menus: [{
                icon: 'el-icon-setting',
                index: 'sysset',
                title: '系统设置',
                subs: [
                    {
                        index: 'userManagement',
                        title: '用户管理',
                        path: 'http://localhost:9101/config-back/list.html'
                    },
                    {
                        index: 'roleManagement',
                        title: '角色管理',
                        path: 'http://localhost:9101/config-back/list.html'
                    },
                    {
                        index: 'resourceManagement',
                        title: '资源管理',
                        path: 'http://localhost:9101/config-back/list.html'
                    }
                ]
            },{
                icon: 'el-icon-tickets',
                index: 'disconf',
                title: '统一配置管理',
                subs: [
                    {
                        index: 'zookeeper',
                        title: 'ZK统一配置',
                        path: 'http://localhost:9101/config-back/zk_config.html'
                    },
                    {
                        index: 'consul',
                        title: 'consul注册中心',
                        path: 'http://localhost:9101/config-back/list.html'
                    }
                ]
            }],
        },
        methods: {
            getMenus: function () {
                var self = this;
                axios.get("menus").then(function (response) {
                    if (response.data.success) {
                       //TODO
                       //self.menus = response.data.result;
                    }else {
                        this.$message.error(response.data.message);
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            handMenuClick: function (item) {
                if(this.tabsName.indexOf(item.index) < 0) {
                    this.tabsArr.push({
                        title: item.title,
                        name: item.index,
                        content: item.path
                    });
                    this.tabsName.push(item.index);
                }
                this.tabsValue = item.index;
            },
            removeTab(targetName) {
                let tabs = this.tabsArr;
                let activeName = this.tabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.tabsValue = activeName;
                this.tabsArr = tabs.filter(tab => tab.name !== targetName);
            }
        },
        mounted: function () {
            this.getMenus();
        }
    });
</script>

</body>
</html>